<template>
    <Breadcrumb></Breadcrumb>
    <el-card>
        <el-row style="margin-top: 15px;margin-bottom: 15px" gutter = "20">
            <el-col :span="12" >
                <div>
                    <el-input placeholder="请输入内容" v-model="condition" class="input-with-select">
                        <template #prepend>
                            <el-select v-model="queryType" placeholder="请选择" @change="selectChange">
                                <el-option label="菜单名称" value="menuName"></el-option>
                                <el-option label="菜单编码" value="menuCode"></el-option>
                            </el-select>
                        </template>
                        <template #append>
                            <el-button icon="el-icon-search"  @click="getMenuPage"></el-button>
                        </template>
                    </el-input>
                </div>
            </el-col>
            <el-col :span="3">
                <el-button round  @click="dialogFormVisible = true">添加菜单</el-button>
                <el-dialog title="新增菜单信息" v-model="dialogFormVisible">
                    <el-form label-position="right" label-width="120px"
                             :model="newMenuForm">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="菜单标题">
                                    <el-input v-model="newMenuForm.menuTitle" placeholder="菜单标题"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="菜单名称">
                                    <el-input v-model="newMenuForm.menuName" placeholder="菜单名称"/>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="菜单编码">
                                    <el-input v-model="newMenuForm.menuCode" placeholder="菜单编码"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="父级菜单">
                                    <el-tree-select
                                        v-model="parentId"
                                        :data="data"
                                        check-strictly
                                        :render-after-expand="false"
                                    />
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-form-item label="菜单路径">
                            <el-input v-model="newMenuForm.menuPath" placeholder="菜单访问路径"/>
                        </el-form-item>
                        <el-form-item label="文件位置">
                            <el-input v-model="newMenuForm.filePath" placeholder="组件相对路径"/>
                        </el-form-item>
                    </el-form>
                    <template #footer>
                    <span class="dialog-footer">
                      <el-button @click="dialogFormVisible = false">取 消</el-button>
                      <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                    </span>
                    </template>
                </el-dialog>
            </el-col>
        </el-row>
        <el-row>
            <el-col>
                <el-table :data="gridData" row-key="id" stripe style="width: 100%">
<!--                    <el-table-column type="index" label="#"></el-table-column>-->
                    <el-table-column prop="id" label="ID" width="180"></el-table-column>
                    <el-table-column prop="menuTitle" label="标题" width="180"></el-table-column>
                    <el-table-column prop="menuName" label="名称" width="180"></el-table-column>
                    <el-table-column prop="menuCode" label="编码"></el-table-column>
                    <el-table-column prop="parentId" label="父菜单ID"></el-table-column>
                    <el-table-column prop="filePath" label="文件路径"></el-table-column>
                    <el-table-column prop="icon" label="图标"></el-table-column>
                    <el-table-column prop="router" label="路由"></el-table-column>
                    <el-table-column prop="sort" label="排序"></el-table-column>
                </el-table>
                <div class="block">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                   :current-page="gridInfo.pageNum" :page-sizes="[100, 200, 300, 400]" :page-size="gridInfo.pageSize"
                                   layout="total, sizes, prev, pager, next, jumper" :total="gridInfo.totalCount">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>

    </el-card>

</template>

<script>
    import Breadcrumb from '@/components/breadcrumb/Breadcrumb';
    import { queryMenuPage } from '@/request/api';
    import { reactive, ref } from 'vue';

    export default {
        name: 'MenuSetting',
        components: { Breadcrumb },
        data () {
            return {
                gridInfo : {
                    pageNum:1,
                    pageCount:0,
                    pageSize:10,
                    totalCount:1000,
                    rows:[]
                },
                tableData:[],
                dialogFormVisible: false,
                gridData: [],
                condition:'',
                queryType:'menuName',
                newMenuForm:{
                    menuName:'',
                    menuCode:'',
                    menuPath:'',
                    menuTitle:'',
                    parentId:'',
                    router:'',
                    filePath:'',
                }

            }
        },
        created () {
            this.getMenuPage();
        },
        methods: {
            getMenuPage () {
                let param = {
                    "pageSize": 10,
                    "pageNum": 1
                };
                if(this.condition){
                    if (this.queryType === ''){
                        return this.$message.warning("请选择对应的查询类型")
                    }else {
                        param = {
                            ...param,
                            [this.queryType]:this.condition
                        }
                    }
                }
                console.log(param);
                queryMenuPage(param).then(res => {
                    console.log(res);
                    this.gridData = res.data.rows;
                })
            },
            handleSizeChange (val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange (val) {
                console.log(`当前页: ${val}`);
            },
            selectChange(){
                console.log(this.queryType);
            }
        }
    }
</script>

<style scoped>
    .el-input .el-select {
        width: 130px;
    }
    .input-with-select .el-input-group__prepend {
        background-color: #fff;
    }
    .el-pagination{
        margin-top: 15px;
    }
    body .el-table thead.has-gutter{
        display: table-cell!important;
    }

</style>
